<template>
  <div>
    <Portlet>
      <template slot="caption"> 学校列表</template>
      <template slot="action">
        <el-button
          type="primary"
          size="small"
          @click="showDialogUserAddVisible"
        >
          绑定学校
        </el-button>
      </template>

      <!--      <template slot="search">-->
      <!--        <div class="search">-->
      <!--          <el-select-->
      <!--            v-model="search.verify"-->
      <!--            size="small"-->
      <!--            placeholder="认证状态"-->
      <!--            style="width: 120px"-->
      <!--          >-->
      <!--            <el-option label="请选择状态" value=""> </el-option>-->
      <!--            <el-option label="未认证" value="init"> </el-option>-->
      <!--            <el-option label="审核中" value="doing"> </el-option>-->
      <!--            <el-option label="已认证" value="success"> </el-option>-->
      <!--            <el-option label="认证失败" value="failure"> </el-option>-->
      <!--          </el-select>-->

      <!--          <el-input-->
      <!--            v-model="search.phone"-->
      <!--            placeholder="手机号"-->
      <!--            size="small"-->
      <!--            style="width: 150px; margin-left: 8px"-->
      <!--          ></el-input>-->

      <!--          <el-button-->
      <!--            size="small"-->
      <!--            type="primary"-->
      <!--            style="margin-left: 8px"-->
      <!--            @click="getOrganizationList"-->
      <!--            >搜索</el-button-->
      <!--          >-->
      <!--        </div>-->
      <!--      </template>-->

      <template slot="body">
        <el-table
          :data="page.list"
          border
          tooltip-effect="dark"
          style="width: 100%"
          class="ss-table"
        >
          <el-table-column prop="schoolId" label="学校ID" width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            label="机构名称"
            style="white-space: nowrap; min-width: 300px"
          ></el-table-column>
          <el-table-column
            prop="mobile"
            label="创建人手机号"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="educationName"
            label="教育局"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="nickname"
            label="营销人员"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="channelCount"
            label="收款通道"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="campusCount"
            label="校区数"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="studentCount"
            label="学生数"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="teacherCount"
            label="老师数"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="payCount"
            label="收款笔数"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="payAmount"
            label="收款总额"
            width="80"
          ></el-table-column>
          <el-table-column prop="code" label="优惠码" width="150">
          </el-table-column>

          <el-table-column label="关联时间" width="140">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label-class-name="ss__table__set_column"
            label="操作"
            width="60"
          >
            <template slot-scope="scope">
              <div class="table__set">
                <a @click="showDialogUserEditVisible(scope.row.schoolId)"
                >编辑</a
                >
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!--        <Pagination-->
        <!--          :count="page.count"-->
        <!--          :page-count="page.pageCount"-->
        <!--          :size="page.size"-->
        <!--          :number="page.number"-->
        <!--          :callback="onPaginationChange"-->
        <!--        />-->
        <Pagination
          :count="page.count"
          :size="page.size"
          :number="page.number"
          :callback="onPaginationChange"
        />
      </template>
    </Portlet>
    <!--      师说网,让天下没有难做的教育-->
    <Footer />
    <!--    添加-->
    <el-dialog
      title="新增学校"
      :visible.sync="dialogEducationAddVisible"
      width="600px"
    >
      <el-form ref="form" label-width="120px" size="small" style="width: 350px">
        <el-form-item label="学校编号">
          <el-input
            v-model.number="form.schoolId"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="创建人手机号"
          prop="number"
          :error="error.schoolId"
        >
          <el-input v-model.number="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogEducationAddVisible = false"
        >取 消</el-button
        >
        <el-button type="primary" size="mini" @click="addSchool">
          确 认</el-button
        >
      </span>
    </el-dialog>
    <!--     编辑-->
    <el-dialog title="编辑" :visible.sync="dialogUserEditVisible" width="520px">
      <el-form ref="form" label-width="120px" size="small" style="width: 350px">
        <el-form-item label="公司名称" prop="number">
          <el-input v-model="form.businessName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="营业执照" prop="number">
          <el-input
            v-model="form.businessLicense"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogUserEditVisible = false"
        >取 消</el-button
        >
        <el-button type="primary" size="mini" @click="editSchool">
          确 认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { CodeToText, regionData } from "element-china-area-data"

export default {
  name: "List",

  data() {
    return {
      // regionList: regionData,
      page: {
        list: [],
        count: 0,
        size: 10,
        number: 1,
      },
      // search: {
      //   verify: "",
      //   departmentList: [],
      //   phone: "",
      // },
      form: {
        mobile: "",
        businessName: "",
        regionId: [],
        businessLicense: "",
        schoolId: "",
      },
      error: {},
      dialogUserEditVisible: false,
      dialogEducationAddVisible: false,
      editSchoolId: 0,
    }
  },
  mounted() {
    this.$parent.active = "101"
    // this.getSchoolList()
    // 初始化echarts
  },
  methods: {
    getSchoolList() {
      this.$http
        .get("/admin/user/school/page.json", {
          p: this.page.number,
        })
        .then((res) => {
          this.list = res
          this.page.list = res.list
          this.page.count = res.count
          this.page.size = res.rows
        })
    },

    clickTab(tabData) {
      this.tabActive = tabData.name
      this.$router.push(tabData.url)
    },
    onPaginationChange(pageNum) {
      this.page.number = pageNum
      this.getSchoolList()
    },
    showDialogUserAddVisible() {
      this.dialogEducationAddVisible = true
    },
    addSchool() {
      let region = []
      this.form.regionId.forEach((item) => {
        region.push(CodeToText[item])
      })

      this.$http
        .post("/admin/user/school/add.json", {
          // businessName: this.form.businessName,
          // businessLicense: this.form.businessLicense,
          schoolId: this.form.schoolId,
          mobile: this.form.mobile,
          // province: this.form.regionId[0],
          // city: this.form.regionId[1],
          // district: this.form.regionId[2],
          // region: JSON.stringify(region)
        })
        .then((res) => {
          this.getSchoolList()
          this.$message.success("添加成功~")
          this.form = {
            mobile: "",
            name: "",
            regionId: [],
            license: "",
            schoolId: "",
          }
          this.dialogEducationAddVisible = false
          this.error = {}
        })
        .catch((error) => {
          this.error = error
        })
    },

    // 编辑
    showDialogUserEditVisible(schoolId) {
      this.editSchoolId = schoolId
      this.dialogUserEditVisible = true
      this.form = {}
      this.$http
        .get("/admin/user/school/detail.json", {
          schoolId: schoolId,
        })
        .then((res) => {
          this.form = res
        })
    },
    editSchool() {
      this.$http
        .post("/admin/user/school/update.json", {
          businessName: this.form.businessName,
          schoolId: this.form.schoolId,
          businessLicense: this.form.businessLicense,
        })
        .then((res) => {
          this.getSchoolList()
          this.form = {
            mobile: "",
            name: "",
            regionId: [],
            license: "",
            schoolId: "",
          }
          this.$message.success("编辑成功~")
          this.dialogUserEditVisible = false
        })
    },
  },
}
</script>

<style scoped></style>
